<template>
  <div class="mall-container">
    <h1>官网商城端</h1>
    <a-card class="mall-card">
      <template #title>商城概览</template>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-statistic title="今日访问量" :value="3256" />
        </a-col>
        <a-col :span="8">
          <a-statistic title="今日订单" :value="189" />
        </a-col>
        <a-col :span="8">
          <a-statistic title="转化率" :value="5.8" suffix="%" precision="1" />
        </a-col>
      </a-row>
    </a-card>
    
    <a-divider />
    
    <a-card class="mall-card">
      <template #title>商城功能</template>
      <a-space direction="vertical" size="large" style="width: 100%">
        <a-row :gutter="16">
          <a-col :span="6" v-for="(item, index) in mallFeatures" :key="index">
            <a-card hoverable>
              <template #cover>
                <div class="feature-icon">
                  <component :is="item.icon" />
                </div>
              </template>
              <a-card-meta :title="item.title">
                <template #description>{{ item.description }}</template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </a-space>
    </a-card>
  </div>
</template>

<script setup>
import { IconTag, IconGift, IconUser, IconSettings } from '@arco-design/web-vue/es/icon';

const mallFeatures = [
  { title: '订单管理', description: '管理商城订单', icon: IconTag },
  { title: '商品管理', description: '管理商城商品', icon: IconGift },
  { title: '会员管理', description: '管理商城会员', icon: IconUser },
  { title: '商城设置', description: '配置商城参数', icon: IconSettings }
];
</script>

<style scoped>
.mall-container {
  padding: 20px;
}

.mall-card {
  margin-bottom: 20px;
}

.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-color: #f2f3f5;
  font-size: 36px;
  color: #165DFF;
}
</style>
